{% load i18n common %}
<div id="{{ model_name }}_edit_form" style="height: 480px;width: auto">
        <form class="layui-form action-form" action="" method="post" id="{{ model_name }}_{{ action_repr }}"
              enctype="multipart/form-data">
            {% csrf_token %}
            {% with form.form as f %}
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-top: 10px">
                        <div class="layui-row">
                            <div class="layui-col-md12">
                                <div class="layui-card-header"><i class="fa fa-bell-o"></i><span
                                        style="padding-left: 5px">{% trans 'menu_sys_departmentAlert' %}</span>
                                </div>
                                <div class="layui-card-body" style="margin: 10px">
                                    <div class="layui-form-item">
                                        {% layui_inline f.departmentalert_code %}
                                    </div>
                                    <div class="layui-form-item">
                                         {% layui_inline f.department %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab layui-tab-brief" lay-filter="employee_profile_tabs">
                    <ul class="layui-tab-title">
                        <li lay-id="emp_detail"
                            class="layui-this">{% trans 'messengerSetting_messageType_intradayAttendanceSummary' %}</li>
                        <li lay-id="emp_app">{% trans 'personalAlert_field_alertSetting' %}</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item layui-hide">
                                {% layui_inline f.is_enble_alert %}
                            </div>
                            <div class="layui-form-item layui-col-md12">
                                <div class="layui-inline">
                                    {% layui_inline f.late_exceeds %}
                                    <div class="layui-form-mid layui-word-aux"
                                         style="float: right;">{% trans 'alertSettingPage_exceedUnit_times' %}</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    {% layui_inline f.early_leave_exceeds %}
                                    <div class="layui-form-mid layui-word-aux"
                                         style="float: right;">{% trans 'alertSettingPage_exceedUnit_times' %}</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    {% layui_inline f.absent_exceeds %}
                                    <div class="layui-form-mid layui-word-aux"
                                         style="float: right;">{% trans 'alertSettingPage_exceedUnit_times' %}</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_label_emailSendingFrequency' %}<span
                                        class="required">*</span></div>
                                <div class="layui-input-inline">
                                    <select name="sending_frequency" id="id_sending_frequency" class="layui-input"
                                            lay-filter="sending_frequency">
                                        <option value="0">{% trans 'frequency_option_none' %}</option>
                                        <option value="3">{% trans 'frequency_option_daily' %}</option>
                                        <option value="2">{% trans 'frequency_option_weekly' %}</option>
                                        <option value="1">{% trans 'frequency_option_monthly' %}</option>
                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline layui-hide" style="width: 30px"
                                         title="{% trans 'sending_alert' %}">
                                        <input type="checkbox" name="exception_alert" lay-skin="primary" title="">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">{% trans 'personalAlert_field_day' %}<span
                                            class="required">*</span></div>
                                    <div class="layui-input-inline">
                                        <select name="day" id="id_day" class="layui-input"></select>
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">{% trans 'personalAlert_field_time' %}<span
                                            class="required">*</span></div>
                                    <div class="layui-input-inline">
                                        <input type="text" id="id_time" name="time" autocomplete="off"
                                               placeholder="" lay-verify="required" class="layui-input">
                                    </div>

                                </div>
                            </div>
                            <div class="layui-form-item">
                                {% layui_inline f.include_today %}
                            </div>
                            <div class="layui-form-item layui-hide">
                                {% layui_inline f.alert_type %}
                            </div>
                            <div class="layui-form-item">
                                {% layui_inline f.email_alert %}
                                {% layui_inline f.messenger_alert %}
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-card-body" style="margin: 10px">
                                <div class="layui-form-item">
                                    {% layui_inline f.bot_uid %}
                                </div>
                                 <div class="layui-form-item">
                                    {% layui_inline f.email %}
                                </div>
                                <span class="color_orange" style="color: #7ac142;float: left;">{% trans 'messenger_field_messengerAlertNotify' %}</span>
                            </div>
                        </div>
                    </div>
                </div>
            {% endwith %}
        </form>
    </div>
<script>
    layui.use(['form', 'layer', 'laydate'], function () {
        var form = layui.form, layer = layui.layer, laydate = layui.laydate;
        laydate.render({
            elem: '#id_time'
            , type: 'time'
            , value: '00:00:00'
        });
        form.render();

        function dayChange(f, d) {
            switch (f) {
                case '1':   //Monthly
                    var options = '';
                    for (var i = 1; i < 32; i++) {
                        options += '<option value="' + i + '">' + i + '</option>';
                    }
                    $("#id_day").html(options);
                    form.render('select');
                    $("#id_day").val(d);
                    break;
                case '2':   //Weekly
                    var options = ''
                        + '<option value="' + 0 + '">' + gettext('monday') + '</option>'
                        + '<option value="' + 1 + '">' + gettext('tuesday') + '</option>'
                        + '<option value="' + 2 + '">' + gettext('wednesday') + '</option>'
                        + '<option value="' + 3 + '">' + gettext('thursday') + '</option>'
                        + '<option value="' + 4 + '">' + gettext('friday') + '</option>'
                        + '<option value="' + 5 + '">' + gettext('saturday') + '</option>'
                        + '<option value="' + 6 + '">' + gettext('sunday') + '</option>';
                    $("#id_day").html(options);
                    $("#id_day").val(d);
                    form.render('select');
                    break;
                case '3':   //Daily
                    var options = '<option value="' + 1 + '">' + 1 + '</option>';
                    $("#id_day").html(options);
                    $("#id_day").val(1);
                    form.render('select');
                    break;
                default:
                    break;
            }
        }

        form.on('select(sending_frequency)', function (data) {
            dayChange(data.value, 1);
        });
    })
</script>